<template>
  <kb-scroll-view>
    <div>
      <h2>default input</h2>
      <div :style="{ background: '#fff', margin: '10px 0' }">
        <p>events CallBack</p>
        <p>eventName:{{ eventName }}</p>
      </div>

      <kb-input
        v-model="mixValue"
        :inputProps="{
          placeholder: 'Any string',
          inputLang: 'en',
        }"
        @input="inputFn"
        @focus="focusFn"
        @blur="blurFn"
        @submit="submitFn"
      />
      <div style="height: 300px"></div>
      <h2>password input event</h2>

      <kb-input
        v-model="value3"
        :inputProps="{ compName: 'passWordInput', gutter: '10px' }"
        :keyBoardProps="{ compName: 'numberKeyBoard' }"
        @input="inputFn"
        @focus="focusFn"
        @blur="blurFn"
        @submit="submitFn"
      />

      <kb-board :emojiMap="emoji" />
    </div>
  </kb-scroll-view>
</template>

<script>
import { person, hearts, symbo } from "../dev/enumerate/emojiImages";
export default {
  name: "App",
  data() {
    return {
      emoji: {
        person,
        hearts,
        symbo,
      },
      eventName: "----",
      mixValue: `hello
,world!!`,
      value3: "123",
    };
  },
  methods: {
    submitFn(data) {
      this.eventName = "submit";
      console.log("inputEvent:submit", data);
    },
    showStatus(data) {
      console.log("监听键盘显示隐藏", data);
    },
    inputFn(data) {
      this.eventName = "input";
      console.log("inputEvent:input", data);
    },
    focusFn(data) {
      this.eventName = "focus";
      console.log("inputEvent:focus", data);
    },
    blurFn(data) {
      this.eventName = "blur";
      console.log("inputEvent:blur", data);
    },
  },
};
</script>

<style>
p {
  word-wrap: break-word;
  white-space: pre-wrap;
}
</style>
